# !/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
===========================
@Time : 2022/8/28 0028 11:26
@Author : 测试开发工程师
@File : 14. 路由-编程式导航.py
@Software: PyCharm
============================
"""

"""
页面导航的两种方式
声明式导航： 
    通过点击链接的方式实现的导航
    vue 组件中的 <router-link to='/user'></router-link>
编程式导航：
    调用 JavaScript 的 api 方法实现导航
    this.$router.push();
    this.$router.go();
        
    


编程式导航用法
字符串（路径名称）
对象：
    命名的路由（传递参数）   
    带查询参数
    字符串： this.$router.push('/register')
    对象： this.$router.push({path:'/layout/login'})
    
    
    
push 例如：
<btn color='primary' @click='toLogin'>登录</v-btn>
<btn @click='toRegister'>注册</v-btn>

定义方法：
<script>
    export default{
        methods: {
            toLogin(){
                通过 router 实例 调用 push 方法完成路由跳转
                //  字符串（路径名称）
                this.$router.push('/layout/login')
                },
            toRegister(){
                //  对象
                this.$router.push({path:'/layout/register'})
                // 命名的路由（传递参数）
                this.$router.push({name:'register'})
                // 带查询参数，变成 /register?userId=123&name=admin
                this.$router.push({path:'/register?userId=123&name='admin'})
                this.$router.push({name:'/register',query:{userId:123,name:'admin'}})
            },
       }
    }
</script>

go 例如：  参数传递一个整数，表示向前/前后 多少步
    <v-btn @click='goForward'>前进</btn>
    <v-btn @click='goBack'>后退</btn>
定义方法：
    goForward(){
    this.$router.go(1)
    },
    goBack(){
    this.$router.go(-1)
    }
"""
